<template>
	<view>
		<view class="image-list" v-if="imgList.length > 0">
			<template v-for="(item,index) in imgList">
				<view class="image-box">
					<image @click="previewImage" class="img-sy" :src="item" :key="index"></image>
					<m-icon @click="itemClick(index)" size="48" color="#999999" type="icon-shanchu1" />
				</view>
			</template>
			<view v-if="imgList.length<length" @click="addPhoto" class="feedback_img flex-column ai-center jc-center">
				<m-icon size="48" color="#999999" type="icon-xiangji"></m-icon>
				<view class="add-btn">添加照片</view>
			</view>
		</view>
		<view v-else @click="addPhoto" class="feedback_img flex-column jc-center ai-center">
			<m-icon size="48" spa="0 0 20 0" color="#999999" type="icon-xiangji"></m-icon>
			<view class="ta-center">{{placeholder}}</view>
		</view>
		<uni-popup ref="popup" type="center" :mask-click="false" :is-mask-click="false" >
			<view class="popupBox flex-column jc-center fs24">
				<view class="plr-24 ta-center flex-column mt-12">
					<progress :percent="upProgress" show-info stroke-width="4" activeColor="#887DFF"  :show-info="false" />
					<text class="mt-20 text-primary fw-600 fs24">上传中：{{upProgress}}%</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { fileUrl } from '@/common/baseconfig.js'
	import cookie from '@/utils/auth.js'
	import { Toast } from '@/utils/tools.js'
	export default {
		name: "uploadPhoto",
		data() {
			return {
				imgList: [],
				upProgress: 0, // 上传进度条
			};
		},

		props: {
			value: {
				type: [Array, Object],
				default: () => [],
			},
			// 可上传图片张数 默认4张
			length: {
				type: [String, Number],
				default: () => {
					return 4
				}
			},
			// 说明提示
			placeholder: {
				type: String,
				default: () => {
					return '添加照片(选填)'
				}
			}
		},
		mounted() {
			this.imgList=this.value
		},
		methods: {
			open(){
				this.$refs.popup.open()
			},
			initData() {
				this.imgList = []
			},
			// 预览大图
			previewImage() {
				uni.previewImage({
					urls: this.imgList,
				});
			},
			async addPhoto(type) {
				var _that = this;
				if (_that.imgList.length == 4) return Toast("最多允许添加4张图片");
				const { tempFilePaths } = await _that.chooseImage();
				console.log('tempFilePaths', tempFilePaths)
				_that.upProgress=0;
				_that.$refs.popup.open();
				const uploadTask = uni.uploadFile({
					url: fileUrl + '/Ctrls/Upload',
					header: {
						'Token': cookie.get('Token'),
						'Lang': _that.$store.state.setting.localeIdx,
					},
					filePath: tempFilePaths[0],
					name: 'upfile',
					success: (uploadFileRes) => {
						console.log('uploadFileRes++.', uploadFileRes);
						const { success, data, msg } = JSON.parse(uploadFileRes['data'])
						if (!success) Toast(msg)
						if (success) {
							_that.imgList.push(data);
							console.log('_that.imgList', _that.imgList)
							_that.$emit("input", _that.imgList)
						}
					},
					fail: (err) => {
						Toast(err);
						console.log('err', err)
					},
					complete: () => {
						// uni.hideLoading()
						_that.$refs.popup.close();
					}
				})
				uploadTask.onProgressUpdate(function(res) {
					console.log('res===>', res)
					_that.upProgress = res.progress;
					console.log('_that.upProgress', _that.upProgress)
				})
			},

			itemClick(index) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定删除这张图片？',
					success: (res) => {
						if (res.confirm) {
							that.imgList.splice(index, 1);
						} else if (res.cancel) {
							console.log('点击了取消')
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.image-list {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-gap: 30rpx;

		.image-box {
			position: relative;
			height: 194rpx;

			.img-sy {
				display: block;
				position: relative;
				float: left;
				width: 100%;
				height: 100%;
				border-radius: 24rpx;
			}

			.mIcon {
				position: absolute;
				top: -20rpx;
				right: -20rpx;
			}
		}
	}

	.feedback_img {
		background: #F6F6F6;
		border-radius: 24rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		width: 100%;
		height: 194rpx;
	}
	.popupBox{
		border-radius: 24rpx;
		width: 400rpx;
		height: 200rpx;
		background-color: #F6F6F6;
	}
</style>